<template>
    <rx-layout>
        <div slot="center">
            <div class="postman-dataImport">
                <div class="dataImportCon">
                    <div>
                        <h3>{{i18n('form.dataImport','数据导入')}}</h3>
                    </div>
                    <div class="dataImportTile">
                        <span class="label">{{i18n('form.importType','导入类型')}}:</span>
                        <a-select style="width:74%;" v-model="importType" :options="typeOptions" />
                    </div>
                    <div class="dataImportTile">
                        <span class="label">{{i18n('form.classification','接口分类')}}:</span>
                        <a-select style="width:74%;" v-model="importClass" :options="classOptions" />
                    </div>
                    <div class="dataSync">
                        <span class="label">{{i18n('form.synchronization','数据同步')}}<a-tooltip>
                            <template slot="title">
                                <div>
                                    <h3 style="color: white;">{{i18n('form.ordinary','普通模式')}}</h3>
                                    <p>{{i18n('form.imported','不导入已存在的接口')}}</p><br>
                                    <h3 style="color: white;">{{i18n('form.coverage','完全覆盖')}}</h3>
                                    <p>{{i18n('form.definition','不保留旧数据，完全使用新数据，适用于接口定义完全交给后端定义')}}</p>
                                </div>
                            </template>
                            <a-icon type="question-circle-o" />
                        </a-tooltip>
                        </span>
                        <a-select style="width:57%;" v-model="dataSync" :options="dataSyncOptions" />
                    </div>
                    <div class="import-content">
                        <a-upload-dragger
                            name="file"
                            :headers="headers"
                            :data="getHttpData"
                            :fileList="fileList"
                            action="/api/api-system/system/core/sysInterfaceApi/doImport"
                            @change="handleChange"
                            :beforeUpload="beforeUpload"
                        >
                            <p class="ant-upload-drag-icon">
                                <a-icon type="inbox" />
                            </p>
                            <p class="ant-upload-text">
                                {{i18n('form.uploadArea','点击或者拖拽文件到上传区域')}}
                            </p>
                            <p class="ant-upload-hint" style="padding-left: 16px;padding-right: 16px;">
                                {{typeMessage[importType]}}
                            </p>
                        </a-upload-dragger>
                    </div>
                </div>
                <div class="dataImportCon" style="margin-left: 20px;">
                    <div>
                        <h3>{{i18n('form.dataExport','数据导出')}}</h3>
                    </div>
                    <div class="dataImportTile">
                        <span class="label">{{i18n('form.classification','接口分类：')}}</span>
                        <a-select style="width:80%;" @change="exportClassChange" v-model="exportClass" :options="classOptions" />
                    </div>
                    <div class="dataExport">
                        <a-radio-group v-model="dataExport" @change="dataExportChange" :options="dataExportOptions" />
                    </div>
                    <div class="export-content">
                        <div>
                            <p class="export-desc">{{i18n('form.interfaceData','导出项目接口文档为 zip 文件,可使用该文件导入接口数据')}}</p>
                            <a-button type="primary" size="large" @click="exportApi">
                                {{$ti18('rxList.exportBtn','导出')}}
                            </a-button>
                        </div>
                    </div>
                </div>
                <div v-if="dataExport=='SELECT'" class="dataImportCon dataImportCon2" style="margin-left: 20px;">
                    <div>
                        <h3>{{i18n('form.interfaceSelection','接口选择')}}</h3>
                    </div>
                    <div class="select-content">
                        <div class="treeBox">
                        <a-tree
                            v-model="checkedKeys"
                            checkable
                            :tree-data="treeData"
                        />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </rx-layout>
</template>

<script>
    import {RxLayout,Util,TokenUtil} from "@lowcode/jpaas-common-lib";
    import SysInterfaceApiApi from "@/api/system/core/sysInterfaceApi";
    import SysInterfaceClassificationApi from "@/api/system/core/sysInterfaceClassification";

    export default {
        name: "SysInterfaceDataManager",
        components:{
            RxLayout
        },
        data(){
            return {
                projectId: '',
                headers:{},
                importClass: '',
                importType:'zip',
                typeMessage:{},
                dataSync: 'COMMON',
                exportClass: '',
                dataExport:'ALL',
                dataExportTmp:'ALL',
                classOptions:[],
                typeOptions:[],
                dataSyncOptions:[
                    {label:this.i18n('form.ordinary','普通模式'),value:'COMMON'},
                    {label:this.i18n('form.completeCoverage','完全覆盖'),value:'MERGE'}
                ],
                dataExportOptions:[
                    {label:this.i18n('form.fullInterface','全部接口'),value:'ALL'},
                    {label:this.i18n('form.enableInterface','启用接口'),value:'DONE'},
                    {label:this.i18n('form.selectInterface','选择接口'),value:'SELECT'}
                ],
                treeData:[],
                checkedKeys:[],
                fileList:[]
            }
        },
        created() {
            var token = TokenUtil.getToken();
            if (token) {
                this.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
            }
        },
        methods:{
            i18n(name, text, key) {
                return this.$ti18(name, text, "sysInterfaceProject", key);
            },
            setData(projectId){
                this.projectId=projectId;
                this.importClass='';
                this.importType='zip';
                this.dataSync='COMMON';
                this.exportClass= '';
                this.dataExport='ALL';
                this.dataExportTmp='ALL';
                this.loadClassification();
                this.loadImportType();
            },
            loadImportType(){
                var self_=this;
                self_.typeOptions=[];
                self_.typeMessage={};
                SysInterfaceApiApi.getInterfaceImportTypeList().then(res=>{
                    var list = res.data;
                    for (var key in list) {
                        self_.typeOptions.push({label: list[key].title, value: key});
                        self_.typeMessage[key]=list[key].message;
                    }
                })
            },
            loadClassification() {
                var self_ = this;
                SysInterfaceClassificationApi.queryByProjectId(this.projectId).then(data => {
                    self_.classOptions=data.map(item=>{
                        return {label:item.classificationName,value:item.classificationId};
                    });
                })
            },
            loadExportApi(exportClass){
                this.checkedKeys = [];
                var self_=this;
                SysInterfaceApiApi.queryByClassificationId(exportClass).then(res=>{
                    self_.treeData=res.map(item=>{
                        return {title:item.apiName,key:item.apiId};
                    })
                })
            },
            exportClassChange(value){
                this.loadExportApi(value);
            },
            dataExportChange(e) {
                if (e.target.value == 'SELECT') {
                    if(!this.exportClass){
                        this.dataExport=this.dataExportTmp;
                        this.$message.error(this.i18n('form.exportCategory','请选择导出分类!'));
                        return;
                    }
                    this.loadExportApi(this.exportClass);
                }
                this.dataExportTmp=e.target.value;
            },
            handleChange(info) {
                const status = info.file.status;
                if (status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    this.fileList=[];
                    if(info.file.response.success){
                        this.$message.success(`${info.file.response.data}`);
                    }else{
                        this.$message.error(`${info.file.response.data}`);
                    }
                } else if (status === 'error') {
                    this.fileList=[];
                    this.$message.error(`${info.file.name}`+this.i18n('form.uploadFailure','文件上传失败.'));
                }
            },
            beforeUpload(file){
                if(!this.importClass){
                    this.$message.error(this.i18n('form.exportCategory','请选择导出分类!'));
                    return false;
                }
                this.fileList.push(file);
                return true;
            },
            getHttpData(file){
                return {
                    classId:Util.encryptWord(this.importClass,true),
                    type:Util.encryptWord(this.dataSync,true),
                    importType:Util.encryptWord(this.importType,true)
                }
            },
            exportApi(){
                if(!this.exportClass){
                    this.$message.error(this.i18n('form.exportCategory','请选择导出分类!'));
                    return;
                }
                SysInterfaceApiApi.export(this.exportClass,this.dataExport,this.checkedKeys.join(','));
            }
        }
    }
</script>

<style scoped>
    .dataImportCon2{
        display: flex;
        flex-direction: column;
    }
    .dataImportCon2 .select-content{
        flex: 1;
        position: relative;
    }
    .treeBox{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }
    .postman-dataImport {
        display: flex;
        padding: 24px;
    }
    .postman-dataImport .dataImportCon {
        min-width: 304px;
        background-color: #ececec;
        padding: 16px;
        border-radius: 4px;
    }
    .postman-dataImport .dataImportCon .dataImportTile {
        color: #2395f1;
        padding: 16px 0;
        font-weight: 500;
        width: 100%;
    }
    .postman-dataImport .dataImportCon .dataImportTile .label {
        color: black;
        font-weight:500;
    }
    .postman-dataImport .dataImportCon .dataSync {
        padding-top: 16px;
        font-weight: 500;
        width: 100%;
    }
    .postman-dataImport .dataImportCon .dataSync .label {
        padding-right: 8px;
        width: 115px;
        display: inline-block;
    }
    .postman-dataImport .dataImportCon .dataSync .label:after {
        content: ":";
        margin: 0 8px 0 2px;
        position: relative;
        top: -.5px;
    }
    .postman-dataImport .dataImportCon .import-content {
        margin-top: 16px;
        height: 180px;
    }
    .postman-dataImport .dataImportCon .dataExport {
        padding-bottom: 16px;
        font-weight: 500;
        width: 100%;
    }
    .postman-dataImport .dataImportCon .export-content {
        text-align: center;
    }
    .postman-dataImport .dataImportCon .export-desc {
        padding-bottom: 15px;
    }

</style>